<template>
  <demoBlock title="图标" padding class="demo-checkbox">
    <vcu-checkbox v-model="checked">
      复选框
      <template #icon="props">
        <vcu-icon
          name="favor"
          :class="{
            'active-icon': props.checked,
            'inactive-icon': !props.checked,
          }"
        />
      </template>
    </vcu-checkbox>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const checked = ref(true);
    return {
      checked,
    };
  },
});
</script>
<style lang="less" scoped>
.demo-checkbox {
  :deep(.vcu-checkbox__icon .vcu-icon) {
    background: none;
    border: none;
    &.inactive-icon {
      color: gray;
    }
  }
  :deep(.vcu-checkbox__icon--checked .vcu-icon) {
    background: none;
    border: none;
    &.active-icon {
      color: red;
    }
  }
}
</style>
